<template>
  <div class="login">
    <div class="top">
      <img src="@/assets/u5.png" alt="" />
    </div>
    <p>智慧园区管理平台</p>
    <div class="left">
      <img src="@/assets/u2.png" alt=""/>
    </div>
    <div class="right">
      <img src="@/assets/u3.png" alt=""/>
    </div>
    <div class="bottom">
      <img src="@/assets/u4.png" alt=""/>
    </div>
    <div class="ipt">
      <img src="@/assets/u8.svg" alt=""/>
    </div>
    <div class="loginbox">
     <el-form :model="form" class="form" :rules="rules" ref="loginref">
      <el-form-item prop="adminname">
        <el-input v-model="form.adminname" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item>
        <el-button class="btn" @click="onSubmit(loginref)">登录</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
import * as service from '../api/wc'
import { onMounted,ref } from 'vue';

var form = ref({ adminname: "", password: "" });
var loginref = ref();
var router = useRouter();

// 表格校验
const rules = {
  adminname: [{ required: true, message: "请输入账号", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
};
var onSubmit = (formEl)=>{
  //获取Form组件实例, 调用validate方法, 手动验证表单数据
  formEl.validate( async (valid) => {
    if (valid) {
       var res = await service.admin_login(form.value)
      console.log(res);
      if( res.status == 200 ){
        //提示"登陆成功!"
        ElNotification.closeAll();
        ElNotification.success({ message:'登陆成功!' });

        //保存用户信息
        // userInfoStore.save_userinfo( res.data.data )

        //跳转到首页
        router.push('/index');

      }else{
        //提示"登陆失败!"
        ElNotification.closeAll();
        ElNotification.error({ message:'登陆失败!' });
      }
    }
  })
}


</script>
<style scoped>

.login{
  height: 100%;
  background-image: url(@/assets/u1.png);
  position: relative;
}
:deep(.el-input__inner){
  color: #fff;
}
.login p {
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 5px;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: -120px;
}

.login .top img {
  width: 100%;
}

.login .left {
  width: 400px;
  position: absolute;
  top: 73px;
  left: 40px;
}

.login .left img {
  height: 832px;
}

.login .right {
  width: 400px;
  position: absolute;
  top: 73px;
  right: 40px;
}

.login .right img {
  height: 832px;
}

.login .bottom {
  position: absolute;
  bottom: 0;
}

.login .ipt {
  width: 500px;
  height: 540px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -240px;
}

.login .loginbox {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

.login .loginbox .form {
  width: 300px;
  padding: 30px;
}
.login .loginbox .form .int{
  border: 1px solid rgb(48, 48, 202);
}
.login .form .btn {
  width: 100%;
  background-color: aqua;
  color: white;
  border: none;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  border: none;
  outline: none;
  /* border: 4px solid rgb(38, 38, 146); */
  border-color: 4px solid rgb(38, 38, 146);
}
</style>
